{% load static %}

{{ products|json_script:"products-data" }}

<div class="product_manage" data-tab-id="product_manage">
<div class="card product_manage_son" data-tab-id="product_manage_son">

  <div class="row g-0">
    <!-- 左侧分类导航  -->
    <div class="col-md-3">
      <div class="card shadow-sm d-flex flex-column" style="height: 82vh;"> <!-- 添加flex布局和固定高度 -->
        <div class="card-header bg-light py-2">
          <h6 class="mb-0 text-center">分类</h6>
        </div>

        <!-- 滚动区域 -->
        <div class="card-body p-0 flex-grow-1 overflow-auto overflow-container">
          <ul class="list-group list-group-flush" id="categoryList">
            {% for category in main_categories %}
              {% include 'ecom/product/category_item.html' with category=category selected=selected_category_id %}
            {% endfor %}
          </ul>
        </div>

        <!-- 固定在底部的按钮 -->
        <div class="mt-auto p-2 border-top bg-light"> <!-- 使用mt-auto实现底部固定 -->
          <button id="addCategoryBtn" class="btn btn-outline-primary btn-sm w-100" style="height: 41px;">
            <i class="bi bi-plus-circle"></i>新增分类
          </button>
        </div>
      </div>
    </div>

    <!-- 右侧商品列表 -->
    <div class="col-md-9">
      <div class="card shadow-sm d-flex flex-column" style="height: 82vh;">
        <div class="card-header bg-light py-2">
          <h6 class="mb-0 text-center product-title">
            {% if selected_category_id %}
              [{{ selected_category_name }}] 商品
            {% else %}
              全部商品
            {% endif %}
          </h6>
        </div>
        <!-- 滚动区域 -->
        <div class="card-body p-0 flex-grow-1 overflow-auto overflow-container">
            <table class="table table-hover align-middle mb-0" id="products-table">
            <thead class="sticky-top bg-white z-1"> <!-- 固定表头 -->
              <tr>
                <th width="5%">ID</th>
                <th width="6%">主图</th>
                <th width="44%">标题</th>
                <th width="10%">库存</th>
                <th width="12%">售价</th>
                <th width="6%">状态</th>
                <th width="17%">操作</th>
              </tr>
            </thead>
            <tbody>
             {% if products %}
              {% for product in products %}
                <tr data-product-id="{{ product.id }}">
                  <td>{{ product.id }}</td>
                  <td>
                    {% if product.main_images %}
                      <img src="{{ product.main_images.0.src }}" class="img-thumbnail" width="40">
                    {% else %}
                        <div  title="无图片" class="d-flex align-items-center justify-content-center bg-light border rounded" style="width:40px; height:40px">
                          <i class="bi bi-image text-muted"></i>
                        </div>
                    {% endif %}
                  </td>
                  <td title="{{ product.name }}">{{ product.name }}</td>
                  <td>{{ product.stock }}</td>
                  <td>¥{{ product.price }}</td>
                  <td>
                    <span class="badge bg-{% if product.is_active %}success{% else %}secondary{% endif %}">
                      {% if product.is_active %}上架{% else %}下架{% endif %}
                    </span>
                  </td>
                  <td>
                    <button class="btn btn-sm btn-warning edit-product">修改</button>
                    <button class="btn btn-sm btn-danger delete-product">删除</button>
                    <button class="btn btn-sm btn-{% if product.is_active %}secondary{% else %}success{% endif %} toggle-status">
                      {% if product.is_active %}下架{% else %}上架{% endif %}
                    </button>
                  </td>
                </tr>
              {% endfor %}
            {% else %}
                <!-- 当products为空时显示 -->
                <tr>
                  <td colspan="7" class="text-center" style="height: 63vh; border: none"> <!-- 使用视口单位动态适应高度 -->
                    <div class="text-muted">
                      <i class="bi bi-exclamation-circle fs-1"></i>
                      <h5 class="mt-3">[{{ selected_category_name }}]下没有关联商品</h5>
                      <p class="small mt-2">
                        <a href="#" class="text-decoration-none">添加新商品</a>
                        或
                        <a href="#" class="text-decoration-none">浏览其他分类</a>
                      </p>
                    </div>
                  </td>
                </tr>
            {% endif %}
            </tbody>
          </table>
        </div>

        <!-- 固定在底部的工具栏 -->
        <div class="mt-auto p-2 border-top bg-light"> <!-- 使用mt-auto实现底部固定 -->
          <div class="d-flex justify-content-between align-items-center p-0">

            <!-- 搜索 -->
            <div class="d-flex align-items-center">
                <form method="get" class="d-flex position-relative">
                  <input type="hidden" name="category_id" value="{{ selected_category_id }}">

                  <!-- 一体化搜索框容器 -->
                  <div class="input-group rounded overflow-hidden border border-primary"
                       style="transition: all 0.3s ease;">

                    <!-- 输入框 -->
                      <input type="text" name="search"
                             class="form-control form-control-sm border-0 shadow-none"
                             placeholder="搜索商品名称..."
                             value="{{ search_query }}"
                             style="background: transparent;">

                      <!-- 搜索按钮 - 核心修改 -->
                      <button type="submit"
                              class="btn btn-sm border-0 p-0 m-0 position-relative"
                              style="background: white; width: 50px">
                          <i class="bi bi-search text-primary"></i>

                          <!-- 悬停覆盖层 -->
                          <span class="hover-overlay position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-0"
                                style="transition: opacity 0.3s ease; z-index: -1;"></span>
                      </button>
                  </div>
                </form>
            </div>

            <!-- 分页 -->
            {% include 'account/partials/paging.html' %}

            <!-- 新增按钮 -->
            <button class="btn btn-primary btn-sm" style="width: 250px" id="addProductBtn">
              <i class="bi bi-plus-circle"></i> 新增商品
            </button>

          </div>
        </div>
      </div>
    </div>

  </div>
</div>
</div>

<!-- 增强型图片预览模态框 -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true" style="z-index: 1200">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content bg-transparent border-0">
      <div class="modal-body p-0 position-relative">
        <!-- 关闭按钮 -->
        <button type="button" class="btn-close position-absolute top-0 end-0 m-3 bg-white rounded-circle p-2"
                data-bs-dismiss="modal" aria-label="Close"></button>

        <!-- 图片容器 -->
        <div id="sliderContainer" class="d-flex overflow-hidden" style="height: 90vh">
          <img id="previewImage" class="img-fluid w-100 h-100 object-contain" alt="预览图">
        </div>

        <!-- 导航箭头 -->
        <button id="prevBtn" class="btn position-absolute top-50 start-0 translate-middle-y bg-dark bg-opacity-25 text-white rounded-circle p-0 m-2">
          <i class="bi bi-chevron-left fs-3"></i>
        </button>
        <button id="nextBtn" class="btn position-absolute top-50 end-0 translate-middle-y bg-dark bg-opacity-25 text-white rounded-circle p-0 m-2">
          <i class="bi bi-chevron-right fs-3"></i>
        </button>

        <!-- 图片计数器 -->
        <div id="imageCounter" class="position-absolute bottom-0 start-50 translate-middle-x mb-3 text-white bg-dark bg-opacity-50 px-3 py-1 rounded-pill"></div>
      </div>
    </div>
  </div>
</div>

<!-- 新增商品模态框 -->
{% include 'ecom/product/product_add_modal.html' %}

<!-- 引入分页 -->
{#<script src="/js/loadPage.js"></script>#}

<style>
    /* 把表格固定在离顶部65px处 */
    [data-tab-id="product_manage"] .product_manage_son {
        position: absolute;
        top: 65px;
        left: 15px;
        right: 15px;
        bottom: 15px;
    }

    {#[data-tab-id="product_manage"] html, body {#}
    {#  overflow-x: hidden;#}
    {#  max-width: 100vw;#}
    {# }#}

  /* 表格全局设置 */
  [data-tab-id="product_manage"] .table {
    table-layout: fixed;
    width: 100%;
  }

  /* 产品名列专属样式 */
  [data-tab-id="product_manage"] td:nth-child(3) {
    width: 44%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

     /* 分页按钮样式优化 */
    [data-tab-id="product_manage"] .position-relative {
        margin-right: 20px;
        {#bottom: 10px;#}
        align-items: center;
        justify-content: end;
    }
    [data-tab-id="product_manage"] .current-total {
        color: black;
    }

    [data-tab-id="product_manage"] .pagination-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
    }

    /* 禁用按钮样式 */
    [data-tab-id="product_manage"] .pagination-btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* 跳转输入框样式 */
    [data-tab-id="product_manage"] .input-group.input-group-sm {
        width: 120px;
    }

    [data-tab-id="product_manage"] #page-jump-input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        height: 36px;
    }

    [data-tab-id="product_manage"] #page-jump-btn {
        background: #6b8dd6 ;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        height: 36px;
        padding: 0 12px;
    }

    /* 响应式调整 */
    [data-tab-id="product_manage"] @media (max-width: 768px) {
        .d-flex.justify-content-end {
            flex-wrap: wrap;
            justify-content: center !important;
        }
        .me-3, .btn-group, .input-group {
            margin-bottom: 10px;
        }
    }

  /* 搜索按钮:聚焦状态增强 */
  /* 按钮悬停效果 */
  [data-tab-id="product_manage"] button:hover .hover-overlay {
    opacity: 1 !important;
  }

  [data-tab-id="product_manage"] button:hover .bi-search {
    color: white !important;
  }

  /* 聚焦状态增强 */
  [data-tab-id="product_manage"] .input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-color: #0b5ed7 !important;
  }

  /* 主题色统一 */
  [data-tab-id="product_manage"] .input-group.border-primary {
    border-color: var(--bs-primary) !important;
  }

  /* 输入框占位符颜色 */
  [data-tab-id="product_manage"] input::placeholder {
    color: var(--bs-primary) !important;
    opacity: 0.7;
  }

  /* 编辑状态高亮 */
  [data-tab-id="product_manage"] li.editing {
    background-color: rgba(13, 110, 253, 0.1) !important;
    border-left: 3px solid #0d6efd;
  }

  /* 分类名称样式  */
  [data-tab-id="product_manage"] .category-item {
    min-width: 0;
    width: 100%;
   }
  /* 分类名称基础样式 */
  [data-tab-id="product_manage"] .category-name {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    /* 图标保护 */
    .bi {
        flex-shrink: 0;
        display: inline-block;
        margin-right: 0.5rem;
    }
      /* 层级缩进兼容 */
      > span {
        display: inline-block;
        max-width: 100%;
      }
  }

  [data-tab-id="product_manage"] .min-width-0 {
      min-width: 0; /* 修复Flex截断问题 */
  }
  [data-tab-id="product_manage"] .text-truncate {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  /* 高亮效果增强 */
  [data-tab-id="product_manage"] .table-danger {
    background-color: #fff0f0;
    border-left: 3px solid #dc3545;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.2);
    transition: all 0.3s ease;
   }
   /* 动画优化 */
   [data-tab-id="product_manage"] @keyframes highlight-pulse {
     0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
     70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
     100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
    }
   [data-tab-id="product_manage"] .table-danger {
     animation: highlight-pulse 1s;
    }

   /* 滚动条整体容器 */
    [data-tab-id="product_manage"] .overflow-container::-webkit-scrollbar {
      width: 8px; /* 垂直滚动条宽度 */
      height: 6px; /* 水平滚动条高度 */
    }

    /* 滚动条轨道 */
    [data-tab-id="product_manage"] .overflow-container::-webkit-scrollbar-track {
      background: #f8f9fa; /* Bootstrap 浅灰背景 */
      border-radius: 8px; /* 圆角轨道 */
      box-shadow: inset 0 0 2px rgba(0,0,0,0.05); /* 内阴影增强层次感 */
    }

    /* 滚动条滑块 */
    [data-tab-id="product_manage"] .overflow-container::-webkit-scrollbar-thumb {
      background: #e9ecef; /* Bootstrap 中性灰 */
      border: 2px solid #fff; /* 白色边框增加精致感 */
      border-radius: 8px; /* 圆角滑块 */
      transition: background 0.3s ease; /* 平滑过渡效果 */
    }

    /* 悬停状态 */
    [data-tab-id="product_manage"] .overflow-container::-webkit-scrollbar-thumb:hover {
      background: #dee2e6; /* 稍深的灰色 */
    }

    /* 滚动条Firefox 兼容方案 */
    [data-tab-id="product_manage"] .overflow-container {
      scrollbar-width: thin; /* 细滚动条 */
      scrollbar-color: #e9ecef #f8f9fa; /* [滑块] [轨道] */
    }

    /* 旋转动画 */
    {#[data-tab-id="product_manage"] .toggle-children .bi {#}
    {#  transition: transform 0.3s ease;#}
    {# }#}
    {##}
    {#[data-tab-id="product_manage"] .toggle-children[aria-expanded="true"] .bi {#}
    {#  transform: rotate(90deg);#}
    {# }#}

    /* 下拉菜单样式 */
    [data-tab-id="product_manage"] .dropdown-toggle::after {
      margin-left: 0.3em;
      vertical-align: 0.15em;
    }

    /* 消除右侧空白 */
    [data-tab-id="product_manage"] .dropdown-toggle::after {
      margin-left: 0.3em;
      vertical-align: 0.15em;
      border-top: 0.35em solid;
      border-right: 0.35em solid transparent;
      border-left: 0.35em solid transparent;
    }

    /* 按钮视觉优化 */
    [data-tab-id="product_manage"] .btn-light {
      color: #495057;
      background-color: #fff;
      border-color: #dee2e6;
      transition: all 0.2s ease;
    }

    [data-tab-id="product_manage"] .btn-light:hover {
      background-color: #f8f9fa;
      box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
    }

    /* 下拉菜单优化 */
    [data-tab-id="product_manage"] .dropdown-menu {
      min-width: 8rem;
      border: 1px solid rgba(0,0,0,0.05);
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    }

    [data-tab-id="product_manage"] .dropdown-item {
      border-radius: 0.25rem;
      margin: 0.15rem 0;
      transition: background-color 0.15s;
    }

    [data-tab-id="product_manage"] .dropdown-item:hover {
      background-color: #f8f9fa;
      color: #0d6efd;
    }
    /* 移除所有层级的竖线 */
    {#[data-tab-id="product_manage"] .children-container {#}
    {#  border-left: none !important;  /* 核心修复 */#}
    {#  background-image: none !important;  /* 防止背景图生成竖线 */#}
    {#  padding-left: 1.2rem; /* 保留缩进 */#}
    {#  border-left: 2px solid #dee2e6;#}
    {#  border-bottom: 1px solid #dee2e6;#}
      {#margin-left: 1rem;#}
    {#  transition: height 0.3s ease;#}
    {# }#}

    /* 修复箭头旋转空间 */
    [data-tab-id="product_manage"] .toggle-children {
      margin-right: 0.5rem;  /* 替代竖线间距 */
    }

    /* 子分类编辑行样式 */
    [data-tab-id="product_manage"] .subcategory-editor {
        transition: all 0.3s ease;
        border-left: 3px solid #0d6efd;
        animation: fadeIn 0.3s;
    }

    [data-tab-id="product_manage"] @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* 输入框聚焦效果 */
    [data-tab-id="product_manage"] .new-subcategory-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        border-color: #86b7fe;
    }

    /* 确保分类项为弹性列布局 */
{#.category-item {#}
{#  display: flex;#}
{#  flex-direction: column;#}
{#  padding: 0 !important; /* 移除默认内边距 */#}
{# }#}
{##}
{#/* 主内容行样式 */#}
{#.category-item > .d-flex {#}
{#  border-bottom: 1px solid #eee; /* 添加分割线 */#}
{# }#}
{##}
{#/* 子分类容器样式 */#}
{#.children-container {#}
{#  transition: height 0.3s ease;#}
{#  overflow: hidden;#}
{# }#}
{##}
{#/* 展开状态样式 */#}
{#.children-container.show {#}
{#  display: block;#}
{#  height: auto;#}
{# }#}

/* 树形分类专用布局 */
#categoryTreeContainer .form-check {
  display: block !important; /* 关键：脱离Flex布局 */
 }

#categoryTreeContainer .form-check-label {
  order: 1;
  display: inline-block;
  margin-right: 10px; /* 文字与复选框间距 */
 }

#categoryTreeContainer .form-check-input {
  order: 2;
  display: inline-block;
  margin-left: 5px; /* 复选框与文字间距 */
 }
{##}
{##categoryTreeContainer .form-check {#}
{#  flex-direction: row-reverse; /* 反转主轴方向 */#}
{#  justify-content: flex-end;   /* 内容右对齐 */#}
{# }#}
{##}
{##categoryTreeContainer .form-check-label {#}
{#  order: 1 !important;#}
{#  margin-right: 10px; /* 文字右侧留空 */#}
{# }#}
{##}
{##categoryTreeContainer .form-check-input {#}
{#  order: 2 !important;#}
{#  margin: 0 !important; /* 清除默认间距 */#}
{# }#}

/* 核心悬浮效果 - 多层次阴影 */
#categoryDropdown,
#categoryTreeContainer {
    box-shadow:
        0 2px 4px rgba(0,0,0,0.05),
        0 4px 8px rgba(0,0,0,0.05),
        0 8px 16px rgba(0,0,0,0.05) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 悬浮状态增强效果 */
#categoryDropdown:hover {
    box-shadow:
        0 4px 8px rgba(32,107,196,0.1),
        0 6px 12px rgba(32,107,196,0.1) !important;
    border-color: #a0c4ff !important;
}

/* 下拉菜单精致边框 */
#categoryTreeContainer {
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 8px !important;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.98) 0%,
        rgba(248,249,250,0.98) 100%
    ) !important;
    backdrop-filter: blur(4px);
}

/* 按钮精致样式 */
#categoryDropdown {
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #f8f9fa 100%
    ) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 6px !important;
    color: #495057 !important;
}

/* 下拉箭头颜色微调 */
#categoryDropdown::after {
    border-top-color: #6c757d !important;
}

/* 选中项高亮效果 */
.category-node .form-check-input:checked + .form-check-label {
    background-color: rgba(13,110,253,0.08) !important;
    border-radius: 4px;
}

/* 隐藏默认文本 */
{##mainImages::file-selector-button {#}
{#  visibility: hidden;#}
{#  width: 0;#}
{# }#}
{#/* 创建自定义按钮 */#}
{##mainImages::before {#}
{#  content: '上传主图(支持多选)'; /* 自定义文本 */#}
{#  display: inline-block;#}
{#  padding: 6px 12px;#}
{#  background: #2a80eb;#}
{#  color: white;#}
{#  border-radius: 4px;#}
{#  cursor: pointer;#}
{# }#}
{#/* 隐藏"未选择文件"提示 */#}
{##mainImages {#}
{#  color: transparent;#}
{# }#}

     /* 图片预览样式 */
  .preview-container {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
  }

  .preview-container:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }

  .preview-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
  }

  .delete-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #dc3545;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
  }

  .delete-btn:hover {
    transform: scale(1.1);
    background: #bd2130;
  }

  .preview-placeholder {
    width: 100%;
    min-height: 120px;
    background: #f8f9fa;
  }

  /* 图片预览样式增强 */
#imagePreviewModal .modal-content {
  background: rgba(0, 0, 0, 0.85);
}

#previewImage {
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

#previewImage.zoomed {
  transform: scale(1.5);
  cursor: zoom-out;
}

/* 导航按钮样式 */
#prevBtn, #nextBtn {
  width: 50px;
  height: 50px;
  opacity: 0.7;
  transition: opacity 0.3s;
}

#prevBtn:hover, #nextBtn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
}

#previewImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
 }


</style>